
<template>
  <div>
    <div id="city_active" class="city_active" :class=" showActive  ? 'active': (isFirst ? '' : 'hide') " >
        <empty v-if="!isShowActiveList" message="暂时没有活动"></empty>
        <ul v-if="isShowActiveList">
        <loadmore :getMore="loadMore">
            <li class="main" v-for="(item, index) in activeList" :key="index" v-tap="{methods: checkDetail, activeId: item.id, status: item.isbaoming, shopName: item.shop.name}">
            <mu-row gutter>
                <div class="left">
                <h2>{{ item.title }}</h2>
                <div class="content little-info">
                    <span>
                    <img :src="position_icon" class="img-icon" alt="">
                    <span v-if="item.area && item.area.parentParentAreaData"> {{ item.area.parentParentAreaData.name | getProvinceName}}</span>
                    <span class="area" v-if="!item.area.parentParentAreaData && item.area.parentAreaData"> {{ item.area.parentAreaData.name | getProvinceName}}</span>
                    <span class="area" v-if="!item.area.parentParentAreaData && !item.area.parentAreaData"> {{ item.area.name | getProvinceName}}</span>
                    </span>
                    <span>
                    <img :src="time_icon" class="img-icon" alt="">
                    <span class="date">{{ item.beginDate | sliceDate }}</span>
                    </span>
                </div>
                <div class="content">
                </div>
                <div class="content">
                    <h3>
                        <i class="iconfont icon-xiala-copy"></i>
                        {{item.fleet.name}}
                        <i class="iconfont icon-xiala-copy"></i>
                        {{item.attendNumber}}
                    </h3>
                </div>
                </div>
                <div class="right">
                <img :src="item.cover ? addPath(item.cover) : defaultImg" width="100%" height="95px" />
                </div>
            </mu-row>

            <div class="attend" v-show="item.isbaoming">
                <span>已报名</span>
            </div>
            <div class="attend-1" v-show="!item.isbaoming">
                <span>未报名</span>
            </div>
            <div class="attend-1" v-show="!item.isbaoming && item.isover">
                <span>已截止</span>
            </div>
            <div class="attend-1" v-show="!item.isbaoming && item.isfull">
                <span>已满员</span>
            </div>

            </li>
        </loadmore>
        </ul>
    </div>
    <div class="midChoose">
        <div class="moreFriend" @click="moreFriend">
            <i class="iconfont icon-xiala-copy"></i><span>更多车友会</span>
        </div>
        <div class="moreActive"  @click="moreActive">
            <span>更多活动</span><i class="iconfont icon-xiala-copy"></i>
        </div>
    </div>
    <div v-show="isFirst || showFriend" class="carfri_meetLists background-gray" :class=" showFriend ? 'active': (isFirst ? '' : 'hide')"  id="carfri_meetLists">
        <empty class="empty" v-if="!isShowCarFriend" message="暂时没有车友会"></empty>
        <ul v-else>
            <li class="main" v-for="item in meetLists">
                <mu-row gutter v-tap="{methods: checkDetailFri, meetId: item.id}">
                    <div class="leftImg">
                        <img :src="item.head ? addPath(item.head) : defaultImg" height="100px" width="100%">
                    </div>
                    <div class="midContent">
                        <div>
                        <h4>{{item.name}}</h4>
                        </div>
                        <div>
                        <p>简介：{{item.remark ? item.remark  : '暂无简介'}}</p>
                        </div>
                        <div v-if="item.fleetType === '0'">
                        <span>会员数：{{item.memberCount}}</span>
                        </div>
                        <div v-if="item.fleetType === '1'">
                        <span>车辆数：{{item.carCount}}</span>
                        </div>
                    </div>
                    <div class="rightContent">
                        <div class="talk" @click="sign(item.id)"><i class="iconfont icon-pinglun1"></i></div>
                        <div class="sign"><i class="iconfont icon-bianji"></i></div>
                    </div>
                </mu-row>
            </li>
        </ul>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import magicHeader from "components/magicHeader";
import loadmore from "components/loadmore";
import left from "assets/left-gray.svg";
import empty from "components/empty-page.vue";
// image
import position_icon from "assets/position.svg";
import time_icon from "assets/time_icon.svg";
import defaultImg from "assets/default_user_icon.png";
// service
import QueryFleetActivityListService from "services/carFriend/QueryFleetActivityList";
//车友会列表
// services
import QueryFleetListService from "services/carFriend/QueryFleetList";
import SignService from "services/carFriend/Sign";
export default {
  name: "city_active_name",
  data() {
    return {
      left,
      defaultImg,
      position_icon,
      time_icon,
      activeList: [],
      isShowActiveList:true,
      query: {
        index: 2,
        count: 5
      },
      queryMore: true,
      left,
      meetLists: [],
      isShowCarFriend:true,
      allLoaded: false,
      searchValue: "",
      id: "",
      hasSign: false,
      memberPosition: "",
      disbaled: false,
      showFriend:false,
      showActive:false,
      isFirst:true
    };
  },
  //
  // 截取日期字符串
  filters: {
    sliceDate: function(value) {
      value = value.split(" ").join("T");
      let resultDate = "";
      const WEEK_DAYS = [
        "",
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "周日"
      ];
      if (value) {
        let tempDate = new Date(value);
        let weekDay = WEEK_DAYS[tempDate.getDay()];
        let month = tempDate.getMonth() + 1;
        let day = tempDate.getDate();
        resultDate = `${cusPadStart(String(month), 2, 0)}/${cusPadStart(
          String(day),
          2,
          0
        )} ${weekDay}`;
      }
      return resultDate;
    },
    // 省份名去掉'省'字
    getProvinceName(value) {
      let index = value.indexOf("省");
      if (index > -1) {
        return value.substr(0, index);
      } else {
        return value;
      }
    }
  },
  created() {
    QueryFleetActivityListService.bind(Vue.prototype)(
      {
        pageable: {
          pageNumber: "1",
          pageSize: "5"
        },
        fleetId: ""
      },
      resp => {
        console.log(resp);
        this.activeList = resp.fleetActivityDatas;
        if(this.activeList.length === '0'){
            this.isShowActiveList = false;
        }
        resp.fleetActivityDatas.forEach((item, index) => {
          console.log(item);
          this.checkDate(item.deadline, function() {
            item.isover = true;
          });
          item.isbaoming = item.attends.some((_item, _index) => {
            return _item.memberId === this.$.userId;
          });
        });
      }
    );
    QueryFleetListService.bind(this)(
      {
        searchValue: ""
      },
      resp => {
        this.meetLists = resp.fleets;
        if(this.meetLists.length === '0'){
            this.isShowCarFriend = false;
        }
      }
    );
  },
  methods: {
    loadMore() {
      if (this.queryMore) {
        QueryFleetActivityListService.bind(this)(
          {
            methodName: "QueryFleetActivityList",
            pageable: {
              pageNumber: this.query.index,
              pageSize: this.query.count
            },
            fleetId: ""
          },
          res => {
            this.query.index++;
            res.fleetActivityDatas.forEach((item, index) => {
              console.log(item);
              this.checkDate(item.deadline, function() {
                item.isover = true;
              });
              item.isbaoming = item.attends.some((_item, _index) => {
                return _item.memberId === this.$.userId;
              });
            });
            this.activeList = this.activeList.concat(res.fleetActivityDatas);
            if (res.fleetActivityDatas.length < this.query.count) {
              this.queryMore = false;
            }
          }
        );
      }
    },
    goBack() {
      this.$router.push({
        name: "carFri_home"
      });
    },
    // 查看活动详情
    checkDetail(params) {
      this.$router.push({
        name: "active_detail",
        params: {
          activeId: params.activeId,
          status: params.status,
          shopName: params.shopName
        }
      });
    },
    checkDate(deadline, success) {
      console.log(attendDate < new Date());
      let attendDate = new Date(Date.parse(deadline.replace(/-/g, "/")));
      if (attendDate < new Date()) {
        success();
      }
    },
    sign(id) {
      this.$.mark().then(res => {
        this.memberPosition = JSON.parse(res);
        this.signState(id);
      });
    },
    signState(id) {
      (this.id = id),
        SignService.bind(this)(
          {
            searchValue: "",
            fleetId: id,
            memberPosition: this.memberPosition.address,
            pageable: {
              pageNumber: 1,
              pageSize: 100
            }
          },
          resp => {
            console.log(document.getElementById("fleetId_" + this.id));
            document.getElementById(
              "fleetId_" + this.id
            ).children[0].innerText =
              "已签到";
            this.hasSign = true;
            console.log("签到成功");
            this.refList();
          }
        );
    },
    // 下拉刷新
    loadBottom() {
      this.getList();
    },
    // 获取车友会列表数据
    getList(searchValue) {
      let _self = this;
      QueryFleetListService.bind(this)(
        {
          searchValue: searchValue
        },
        resp => {
          // pageable.pageNumber++
          _self.meetLists = [];
          console.log(resp.fleets);
          setTimeout(() => {
            _self.meetLists = resp.fleets;
          }, 10);
        }
      );
    },
    refList() {
      let _self = this;
      QueryFleetListService.bind(this)({}, resp => {
        // pageable.pageNumber++
        _self.meetLists = [];
        console.log(resp.fleets);
        _self.meetLists = resp.fleets;
      });
    },
    // 查看车友会详情
    checkDetailFri(params) {
      this.$router.push({
        name: "carFri_meetDetail",
        params: {
          meetId: params.meetId
        }
      });
    },
    // // 搜索车友会
    // goSearch(e) {
    //   if (event.keyCode === 13) {
    //     document.getElementById("searchFleet").blur();
    //     this.getList(this.searchValue);
    //   }
    // }
    moreFriend(){
        this.isFirst = false;
        this.showFriend = true;
        this.showActive = false ;
        console.log(this.isFirst || this.showFriend)
        console.log(this.isFirst || this.showActive)
    },
    moreActive(){
        this.isFirst = false;
        this.showActive = true;
        this.showFriend = false ; 
        console.log(this.isFirst || this.showFriend)
        console.log(this.isFirst || this.showActive)
    },
  },
  components: {
    magicHeader,
    empty,
    loadmore
  }
};

/**
 * padstart方法
 */
function cusPadStart(str, len, strPre) {
  if (String.prototype.padStart) {
    str = str.padStart(len, strPre);
  } else {
    let tempLen = len - str.length;
    for (let index = 0; index < tempLen; index++) {
      str = strPre + str;
    }
  }
  return str;
}
</script>
<style lang="scss" scoped="scoped">
#city_active {
}
#city_active .main {
  background-color: #fff;
  margin-top: 10px;
  padding: 15px;
  padding-left: 10px;
  position: relative;
}
.city_active{
    height: 252px;
    overflow: hidden;
    transition: all 0.5s ;
}
#city_active  #loadMore li:first-child{
    margin-top: 0;
}
#city_active .main .row {
  display: flex;
}
#city_active .main .row > div.left {
  flex: 1;
}
#city_active .main .row > div.right{
  flex: 0 0 120px;
}
#city_active .content {
  margin-top: 20px;
}
#city_active .result_empty {
  background-color: #f8f8f8;
}
#city_active .col-50 img {
  object-fit: cover;
}
#city_active .iconfont {
  color: #f98700;
  margin-left: -6px;
  padding-right: 3px;
}

#city_active .iconfont.icon-dingwei {
  &:before {
    position: relative;
    top: -2.5px;
  }
}
#city_active .iconfont > span {
  position: relative;
  color: #999;
  top: -3px;
  left: -3px;
}
#city_active .iconfont > span.area {
  left: -11px;
}
#city_active .iconfont > .date {
  position: relative;
  top: -3px;
  left: 3px;
}
#city_active p {
  font-size: 14px;
}
#city_active .attend {
  width: 85px;
  height: 70px;
  background-image: url("../../assets/label.png");
  text-align: center;
  position: absolute;
  top: -10px;
  right: 10px;
}
#city_active .attend span {
  display: inline-block;
  margin-top: 44px;
  margin-left: 10px;
}
#city_active .attend-1 {
  width: 85px;
  height: 69px;
  background-image: url("../../assets/label-1.png");
  text-align: center;
  position: absolute;
  top: -10px;
  right: 10px;
}
#city_active .attend-1 span {
  display: inline-block;
  margin-top: 44px;
  margin-left: 10px;
  color: #fff;
}
.little-info {
  display: flex;
  font-size: 13px;
  span:first-child {
    padding-right: 10px;
  }
  span {
    display: flex;
    align-items: center;
  }
  .img-icon {
    width: 19px;
  }
}
.midChoose{
    display: flex;
    width: 100vw;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: #eee;
}
.midChoose div{
    flex:1;
}
.carfri_meetLists {
    height: 230px;
    overflow: hidden;
    transition: all 0.5s ;
}
.active {
    height: calc(95vh - 53px);
    overflow: scroll;
    transition: all 0.5s ;
}
.hide{
    height: 0;
    transition: all 0.5s ;
}
// #carfri_meetLists .search {
//   width: 100%;
//   background-color: #c9c9ce;
//   padding: 6px 10px;
// }
// #carfri_meetLists .search input {
//   width: 100%;
//   display: block;
//   /*border-radius: 5px;*/
//   height: 30px;
//   line-height: 30px;
//   outline: none;
//   text-align: center;
//   border: none;
//   border-radius: 10px;
//   background: url(../../assets/search.svg) no-repeat 15px;
//   background-color: #fff;
// }
#carfri_meetLists .main {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 7px 10px;
  padding-right: 5px;
  position: relative;
}
#carfri_meetLists .main .row {
    display: flex;
}
#carfri_meetLists .main .row > div.leftImg {
  flex: 0 0 100px;
}
#carfri_meetLists .main .row > div.midContent{
  flex: 1;
  margin-left: 10px;
}
#carfri_meetLists .main .row > div.midContent div:first-child{
    margin-top: 2px;
    height: 32px;
}
#carfri_meetLists .main .row > div.midContent div:nth-child(2){
    height: 48px;
}
#carfri_meetLists .main .row > div.midContent div:nth-child(3){
    margin-top: 2px;
    text-align: bottom;
}
#carfri_meetLists .main .row > div.rightContent{
  display: flex;
  flex: 0 0 100px;
  font-size: 0;
}
#carfri_meetLists .main .row > div.rightContent div{
    flex: 1;
    text-align: center;
    height: 100px;
    line-height: 100px;
    font-size: 30px;
}
#carfri_meetLists .main .row > div.rightContent div i{
    font-size: 30px;
}
#carfri_meetLists .main button {
  position: absolute;
  top: 67%;
  right: 5%;
  border: solid 1px #abaaa8;
  width: 55px;
  height: 30px;
  background-color: #fff;
}
#carfri_meetLists .main button {
  position: absolute;
  top: 67%;
  right: 5%;
  border: solid 1px #abaaa8;
}
#carfri_meetLists .main .content div {
  padding-top: 10px;
}
#carfri_meetLists .main .content div span {
  margin-right: 15px;
}
#carfri_meetLists h4 {
  font-size: 15px;
  color: #414141;
}
#carfri_meetLists p {
  color: #666666;
  font-family: Arial, Helvetica, sans-serif;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
<style>
.result_empty{
    padding-top: 10px!important;
}
</style>